<%@ page title="" language="C#" masterpagefile="~/RealtimeSite.master" autoeventwireup="true" inherits="Map, App_Web_uxrncow4" %>

   <%@ Register Assembly="Heidarpour.WebControlUI" Namespace="Heidarpour.WebControlUI"
    TagPrefix="rhp" %>


<%@ Register   Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="AjaxControlToolkit" %>
    <%@ Register   Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .fa-map-marker
    {
        color:Red !IMPORTANT;
    }
  
    .fa-clock-o
    {
        color:Red !IMPORTANT;
    }
    .container1 {
    max-width: 320px !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
   }
   #head_map123
   {
       padding-left:0px !important;
        padding-right:0px !important;
   }
     
    </style>
    <%--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>--%>
  
  <%--  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtZHBysySPOKb5gMXDfSjNoSZrdpjCSSA&callback=initialize"></script>--%>

   <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0MKnOjXLhXWrjyMHJRDCqYN7VybnEtS4 &callback=initMap">
    </script>
    <script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
             {
                "Name": '<%# Eval("Name") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "description": '<%# Eval("Description") %>',
                "ImageData": '<%# Eval("ImageData") %>',
                 "date1": '<%# Eval("date1") %>',
                  "time1": '<%# Eval("time1") %>'
            }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
    </script>
    <script type="text/javascript">

        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        //var data = "Name : " + data.Name + "  Location :" + data.description;
                        // alert(data.ImageData);
                        var base64String = 'data:image/png;base64,' + data.ImageData;

                        // alert(base64String);
                        //infoWindow.setContent('<div class="container" style="width:320px;"><div class="row"><div class="col-lg-4"><img src=' + base64String + ' style="height:100px; width:100px"/></div><div class="col-lg-8" style="margin-left:0px;"><b style="font-size:14px; font-family:cursive;">Name :' + data.Name + '</b> </br><i class="fa fa-map-marker"></i>  Location :' + data.description + '</div></div></div>');
                        infoWindow.setContent('<div class="container container1"><div class="row"><div class="col-lg-4"><img src=' + base64String + ' style="height:115px; width:100px"/></div><div class="col-lg-8" style="margin-left:0px;"><b style="font-size:14px; font-family:cursive;">Name :' + data.Name + '</b> </br><i class="fa fa-map-marker"></i>  <b>Location :</b>' + data.description + '<br><b><i class="fa fa-calendar" style="color:red;"></i> Date:</b>' + data.date1 + '<br> <b><i class="fa fa-clock-o"></i> Time</b>:' + data.time1 + '</div></div></div>');
                        infoWindow.setContent(data);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }

            // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                this.setZoom(9.0);
                google.maps.event.removeListener(boundsListener);
            });
        }
    </script>
      <div class="main-panel">
        <div class="content">
        <div class="container" id="map123" runat="server"> 

<!------Search------->

<div class="row" style="margin-top:100px;">

    <div class="col-md-3 col-lg-3 col-sm-3 bold-fonts">
                              <b><asp:Label ID="lblReportDate" runat="server" Text="From Date"></asp:Label>
                                  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<asp:CheckBox ID="chknewwindow" runat="server"  Text="Show Report In New Window" Visible="false"/> </b>
                          
                          
                          
                       <asp:Panel ID="Panel53" runat="server" Visible="false">
                            <rhp:DatePicker ID="txtdate1" runat="server" DatePersian="" CalendarType="Persian"  
        BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" ShowWeekNumbers="True"
        FirstDayOfWeek="Monday" ShowOthers="True" ></rhp:DatePicker>
                            </asp:Panel>

                          
                          
                              <asp:TextBox ID="txtdate" runat="server" class="form-control" 
           
                   />
            <cc1:CalendarExtender ID="cal1" runat="server" TargetControlID="txtdate" Format="dd/MM/yyyy"  />
                  
                    
                    
                                   </div>


                                    <div class="col-md-3 col-lg-3 col-sm-3">
                             <b> <asp:Label ID="Label1" runat="server" Text="To Date"></asp:Label></b>
                          
                          
                          
                              <asp:TextBox ID="txttodate" runat="server" class="form-control" 
           
                   />
            <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txttodate" Format="dd/MM/yyyy"  />
           
                    
                    
                                   </div>
 
 <div class="col-lg-3">
 <b><asp:Label runat="server" Text="Select Employee"></asp:Label></b><br />
<asp:DropDownList ID="cbodeptname" runat="server" TabIndex="6" class="form-control" 
         AutoPostBack="True" onselectedindexchanged="cbodeptname_SelectedIndexChanged">
                            </asp:DropDownList>
 </div>
 
 </div>
 <hr />
<!------End Search----->
   <div id="dvMap" style="width: 100%; height: 500px; margin-top:10px;">
    </div>
    </div>
    </div>
    </div>
</asp:Content>
 

